<template>
  <div id="data-view">
    <dv-full-screen-container class="dv-full-screen-container " :class="{ 'class2': !fullscreen }">
      <!--    全屏显示-->
      <div class="top-header-left">
        <el-button type="primary" icon="el-icon-full-screen" title="点击全屏展示" v-show="!fullscreen"
                   @click="doFullscreen"></el-button>
      </div>
      <div class="top-header">
        <top-header/>
      </div>
      <div class="main-content">
        <div class="block-left-right-content">
          <dept-chart/>
          <matr-top10/>
          <omoc-chart/>
        </div>
        <div class="main-content-center">
          <appraise/>
          <dept-apply/>
          <matr-this-Year/>
        </div>
        <div class="block-left-right-content">
          <stock-warning/>
          <stock-top50/>
          <exp-stock-top50/>

        </div>
      </div>

    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from './topHeader'
import deptChart from './deptChart'
import stockWarning from './stockWarning'
import WeekFlop from './weekFlop'
import DeptApply from './deptApply'
import MatrTop10 from './matrTop10'
import omocChart from './omocChart'
import matrThisYear from './matrThisYear'
import stockTop50 from './stockTop50'
import ExpStockTop50 from './expStockTop50'
import appraise from './appraise'

export default {
  name: 'DataView',
  components: {
    MatrTop10,
    DeptApply,
    WeekFlop,
    topHeader,
    deptChart,
    stockWarning,
    omocChart,
    matrThisYear,
    stockTop50,
    ExpStockTop50,
    appraise
  },
  data() {
    return {
      fullscreen: false
    }
  },
  methods: {

    //判断是否全屏
    isFullScreen() {
      return !!(
        document.fullscreen
          || document.mozFullScreen
          || document.webkitIsFullScreen
          || document.webkitFullScreen
          || document.msFullScreen
      )
    },
    //最大化
    doFullscreen() {
      let de = document.documentElement
      if (de.requestFullscreen) {
        de.requestFullscreen()
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen()
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen()
      }
      this.fullscreen = true
      // this.$notify({
      //   title: '友情提示',
      //   message: '您可以按下【esc按键】退出全屏噢',
      //   offset: 333,
      //   showClose: false,
      //   position: 'top-left'
      // })
    },
    //取消最大化
    doUnFullscreen() {
      let de = document.documentElement
      if (de.exitFullscreen) {
        de.exitFullscreen()
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen()
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen()
      }
      this.fullscreen = false
    },
    //根据窗口高度变化，设置每页显示数量
    changeSizeByHeight() {
      if (this.isFullScreen()) {
        this.fullscreen = true
      } else {
        this.fullscreen = false
      }
    }
  },
  mounted() {
    let that = this
    //窗口改变，刷新数据
    window.onresize = () => {
      that.changeSizeByHeight()
    }
  }
}
</script>

<style lang="scss" scoped>
  #data-view {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;
    margin: 0;

    .class2 {
      //position: inherit  !important;
      position: absolute !important;
      width: 100% !important;
      height: 100% !important;
    }

    .dv-full-screen-container {
      background-image: url('./img/bg.png');
      box-shadow: 0 0 3px blue;
      display: flex;
      flex-direction: column;
      overflow: scroll;

      .top-header {
        height: 10%;
      }

      .main-content {
        flex: 1;
        display: flex;
        flex-direction: row;
        height: 90%;
      }

      .block-left-right-content {
        flex: 1;
        display: flex;
        margin: 5px;
        flex-direction: column;
        width: 32%;
      }

      .main-content-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 5px;
        width: 32%;
      }

    }

    .top-header-left {
      position: absolute;
      z-index: 1000;
      top: 7%;
      left: 1%;
    }

  }
</style>
